<template>
  <div class="app-container">
    <div class="background">
      <img :src="currentMusic.image + '?param=800y800'">
    </div>

    <div class="top">
      <div class="back" @click.stop="$router.back()">
        <icon-svg icon-class="arrow" />
      </div>
      <div class="name" v-text="currentMusic.name" />
      <div class="singers" v-text="singers" />
      <div class="share" @click.stop="share">
        <icon-svg icon-class="fenxiangyemian" />
      </div>

    </div>

    <div class="centerView" ref="centerView" @click="handleCenterView">
      <transition name="slide-group">
        <div class="view1" key="view1" v-if="CurrentView === 1">
          <div class="cd-container">
            <div class="cd playing" :class="{paused: !playing}">
              <!--              <img :src="currentMusic.image + '?param=800y800'">-->
              <img v-lazy="currentMusic.image + '?param=800y800'">
              <div class="water1" />
              <div class="water2" />
              <div class="water3" />
            </div>
          </div>
          <div class="lyric-container">
            <div class="lyric" v-text="lyricCurrent.txt || '当前没有歌词~'" />
          </div>
        </div>
        <div class="view2" key="view2" v-if="CurrentView === 2">
<!--          阿松大啊实打实的-->
          <scroll class="lyric-list" ref="lyricList">
            <div class="item"
                 v-for="(item, index) in LyricList"
                 :key="item.time"
                 :class="{current: index === currentLyricIndex}"
                 ref="lyrics"
            >{{item.txt}}</div>
          </scroll>
        </div>
      </transition>
    </div>

    <div class="bottom-operation">
      <div class="progress-wrapper">
        <div class="time time-left" v-text="timeLeft" />
        <div class="progress-bar"
             @touchstart.prevent="tStart"
             @touchmove.prevent="tMove"
             @touchend="tEnd"
             ref="progress">
          <div class="progress-line" :style="{width: progress}" ref="progress-line" />
          <div class="progress-btn" :style="{marginLeft: progress}" ref="progress-btn" />
        </div>
        <div class="time time-right" v-text="timeRight" />
      </div>
      <div class="operators">
        <div class="icon" @click="handleLike">
          <icon-svg class="like" :icon-class="isLike ? 'xihuan' : 'buxihuan'" />
        </div>
        <div class="icon" @click="Prev">
          <icon-svg class="prev" icon-class="shangyishouge" />
        </div>
        <div class="icon" @click="playing = !playing">
          <icon-svg class="play" :icon-class="playing ? 'zanting' : 'bofang'" />
        </div>
        <div class="icon" @click="Next">
          <icon-svg class="next" icon-class="xiayishou" />
        </div>
        <div class="icon" @click="ChangeMode">
          <icon-svg class="mode" :icon-class="mode === 0 ? 'danquxunhuan' : mode === 1 ? 'liebiaoxunhuan' : 'suijibofang1'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FormatInterval } from 'common/js/utils'
import { ModeType } from 'common/js/constant'

export default {
  name: 'player',
  data () {
    return {
      ProgressWidth: 0,
      ProgressOffsetLeft: 0,
      CurrentView: 1,

      Touching: false,
      currentTime: 0
    }
  },
  created () {
    if (!this.currentMusic.id) {
      this.$router.replace('/recommend')
    }
  },
  mounted () {
    window.player = this
    this.ProgressWidth = this.$refs.progress.offsetWidth || 0
    this.ProgressOffsetLeft = this.$refs.progress.offsetLeft || 0
    this.$audio.$refs.audio.addEventListener('timeupdate', this.updateTime)
  },
  methods: {
    handleCenterView () {
      this.CurrentView = this.CurrentView === 1 ? 2 : 1
    },
    handleLike () {
      const type = this.isLike ? 'user/delFavoriteSongIds' : 'user/addFavoriteSongIds'
      this.$store.dispatch(type, this.currentMusic.id)
    },
    ChangeMode () {
      this.mode = this.mode === 2 ? this.mode = 0 : this.mode + 1
    },
    share () {
      this.$copy('https://music.163.com/#/song?id=' + this.currentMusic.id)
    },
    Prev () {
      if (this.mode === 0) this.$audio.audio.load()
      this.$store.dispatch('player/Prev')
    },
    Next () {
      if (this.mode === 0) this.$audio && this.$audio.Again()
      this.$store.dispatch('player/Next')
    },
    tStart (e) {
      this.$audio.Touching = true
      this.Touching = true
      const offsetX = e.touches[0].clientX - this.ProgressOffsetLeft
      if (offsetX >= 0 && offsetX <= this.ProgressWidth) {
        const Percentage = this.computePercentage(offsetX)
        this.$refs['progress-line'].style.width = Percentage
        this.$refs['progress-btn'].style.marginLeft = Percentage
      }
    },
    tMove (e) {
      const offsetX = e.touches[0].clientX - this.ProgressOffsetLeft
      if (offsetX >= 0 && offsetX <= this.ProgressWidth) {
        const Percentage = this.computePercentage(offsetX)
        this.$refs['progress-line'].style.width = Percentage
        this.$refs['progress-btn'].style.marginLeft = Percentage
      }
    },
    tEnd (e) {
      this.$audio.Touching = false
      this.Touching = false
      const offsetX = e.changedTouches[0].clientX - this.ProgressOffsetLeft
      if (offsetX >= 0 && offsetX <= this.ProgressWidth) {
        const Second = offsetX / this.ProgressWidth * this.currentMusic.duration
        const milliSecond = parseInt(Second * 1000)
        this.$audio.SetCurrentTime(Second)
        if (this.lyric) this.lyric.seek(milliSecond)
      }
    },
    updateTime (time) {
      if (this.Touching) return
      this.currentTime = time.target.currentTime
    },
    computePercentage (offsetX) {
      return offsetX / this.ProgressWidth * 100 + '%'
    }
  },
  watch: {
    lyricCurrent (lyric) {
      if (this.$refs.lyrics && this.CurrentView === 2) {
        if (lyric.lineNum > 5) {
          let current = this.$refs.lyrics[lyric.lineNum - 5]
          if (current) this.$refs.lyricList.scrollToElement(current, 1000)
        } else {
          this.$refs.lyricList.scrollTo(0, 0, 1000)
        }
      }
    }
  },
  computed: {
    currentMusic () {
      return this.$store.state.player.currentMusic
    },
    lyric () {
      return this.$store.state.player.lyric
    },
    lyricCurrent () {
      return this.$store.state.player.lyricCurrent || {}
    },
    currentLyricIndex () {
      return this.$store.state.player.lyricCurrent.lineNum || -1
    },
    LyricList () {
      return this.lyric ? this.lyric.lines : []
    },
    singers () {
      return this.$store.state.player.currentMusic.singer
        ? this.$store.state.player.currentMusic.singer.map(i => i.name).join('/') : ''
    },
    playList () {
      return this.$store.state.player.playList
    },
    playing: {
      get () {
        return this.$store.state.player.playing
      },
      set (value) {
        this.$audio.playing = value
      }
    },
    mode: {
      get () {
        return this.$store.state.player.mode
      },
      set (value) {
        this.$store.dispatch('player/setMode', value)
      }
    },
    modeTest () {
      return ModeType.find(item => item.type === this.mode).text
    },
    favoriteSongIds () {
      return this.$store.state.user.favoriteSongIds
    },
    isLike () {
      return this.favoriteSongIds.includes(this.currentMusic.id)
    },
    progress () {
      return this.currentTime / this.currentMusic.duration * 100 + '%'
    },
    timeLeft () {
      return FormatInterval(this.currentTime)
    },
    timeRight () {
      return FormatInterval(this.currentMusic.duration)
    }
  },
  destroyed () {
    this.$audio.$refs.audio.removeEventListener('timeupdate', this.updateTime)
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .app-container {
    background: #222;
    z-index: 200;
  }

  .background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: .6;
    filter: blur(20px);
    img {
      width: 100%;
      height: 100%;
    }
  }

  .top {
    position: relative;
    margin-top: @status-bar-height;
    margin-bottom: 25px;
    .back, .share {
      padding: 9px;
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 50;
      color: @color-theme;
      .icon-svg { font-size: @font-size-large-x }
    }
    .name {
      margin: 0 46px;
      line-height: 40px;
      color: #fff;
      font-size: @font-size-large;
    }
    .singers {
      line-height: 20px;
      color: #fff;
      font-size: @font-size-medium;
    }
    .share {
      left: auto;
      right: 6px;
      .icon-svg { font-size: calc(@font-size-large-x + 2px) }
    }
  }

  .centerView {
    position: fixed;
    width: 100%;
    top: 80px;
    bottom: 170px;
    white-space: nowrap;
    font-size: 0;

    display: flex;
    align-items: center;
    .view1 {
      display: inline-block;
      vertical-align: top;
      position: absolute;
      width: 100%;
      height: 0;
      padding-top: 75%;
      .cd-container {
        position: absolute;
        top: 0;
        left: 10%;
        width: 75%;
        height: 100%;
        .cd {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 10px solid hsla(0,0%,100%,.1);
          border-radius: 50%;
          position: relative;
          animation: playing-rotate 20s linear infinite running;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
          }
          .water1, .water2, .water3 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 50%;
            animation: water-animate 6s ease-out infinite running;
          }
          .water1 { animation-delay: 4s }
          .water2 { animation-delay: 2s }
          .water3 { animation-delay: 0s }
        }
        .cd.paused {
          animation-play-state: paused;
          .water1, .water2, .water3, .water4 {
            animation-play-state: paused;
          }
        }
        /*.cd :before {
          content: "";
          width: 100%;
          height: 100%;
          !*position: absolute;*!
          animation: water-animate 3s linear infinite running;
        }*/
      }
      .lyric-container {
        width: 80%;
        margin: 30px auto 0;
        overflow: hidden;
        /*text-align: center;*/
        .lyric {
          height: 20px;
          line-height: 20px;
          font-size: @font-size-medium;
          color: white;
          .no-wrap();
        }
      }
    }
    .view2 {
      padding: 36px 0;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      .lyric-list {
        height: 100%;
        overflow: hidden;
        .item {
          line-height: 32px;
          color: rgba(255,255,255, .5);
          font-size: @font-size-medium;
        }
        .item.current { color: #fff }
      }
    }
    /*.view3 {

    }*/
  }

  .bottom-operation {
    width: 100%;
    position: absolute;
    bottom: @player-mini-height;
    .progress-wrapper {
      padding: 10px 30px;
      /*height: 8px;*/
      display: flex;
      align-items: center;
      .progress-bar {
        height: 4px;
        background: rgba(0,0,0,.3);
        flex: 1;
        border-radius: 4px;
        position: relative;
        .progress-line {
          height: 100%;
          background: @color-theme;
          border-radius: 4px;
        }
        .progress-btn {
          width: 16px;
          height: 16px;
          border: 3px solid #fff;
          box-sizing: border-box;
          background: @color-theme;
          position: absolute;
          top: -5px;
          left: -8px;
          .border-radius(50%);
        }

        &:before {
          content: "";
          position: absolute;
          top: -13px;
          bottom: -13px;
          left: 0;
          right: 0;
        }
      }
      .time {
        color: #fff;
        font-size: @font-size-small;
        flex: 0 0 40px;
        width: 40px;
        line-height: 30px;
      }
      .time-left {
        padding-right: 10px;
      }
      .time-right {
        padding-left: 10px;
      }
    }

    .operators {
      display: flex;
      .icon {
        flex: 1;
        text-align: center;
        color: @color-theme;
        .like, .prev, .next, .mode { font-size: 30px }
        .play { font-size: 35px }
      }
    }
  }

  @keyframes playing-rotate {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
  }
  @keyframes water-animate  {
    0% {
      transform: scale(1);
      border: 1px solid hsla(0,0%,100%,.1);
    }
    100% {
      transform: scale(1.8);
      border: 1px solid hsla(0,0%,100%,0);
    }

  }

  .slide-group-enter-active, .slide-group-leave-active { transition: all .3s }
  .slide-group-enter, .slide-group-leave-to { opacity: 0 }
  .view1.slide-group-enter, .view1.slide-group-leave-to { transform: translateX(-100%) }
  .view2.slide-group-enter, .view2.slide-group-leave-to { transform: translateX(100%) }

</style>
